<template>
  <div class="ranking-container">
    <!-- 头部动画 -->
    <div class="ranking-top-pic">
      <img class="ranking-top-pic--top" src="./resource/bg.png" alt="" />
      <div class="ranking-top-pic_center">
        <img class="ranking-top-pic_center--img" src="./resource/center.png" alt="" />
      </div>
      <div class="ranking-top-pic_star">
        <img src="./resource/star.png" alt="" />
      </div>
      <div class="ranking-top-pic_font">
        <img src="./resource/font.png" alt="" />
      </div>
      <div class="ranking-top-pic_left">
        <img src="./resource/right-light.png" alt="" />
      </div>
      <div class="ranking-top-pic_right">
        <img src="./resource/left-light.png" alt="" />
      </div>
      <div class="ranking-top-pic_light">
        <img src="./resource/light.png" alt="" />
      </div>
      <div class="ranking-top-pic_title">
        <div class="text">-集思广益 群策群力-</div>
        <img src="./resource/card.png" alt="" />
      </div>
    </div>
    <!-- table表格 -->
    <div class="ranking-table">
      <a-table
        class="custom-table"
        :columns="columns"
        :dataSource="dataSource"
        :row-class-name="(record, index) => (index % 2 ? 'ranking-cell-egg' : 'ranking-cell-ogg')"
        :pagination="pagination"
      >
        <template #bodyCell="{ column, record }">
          <div v-if="column.key === 'index'" style="text-align: right">
            <span v-if="record.trend === 1">
              <img style="width: 10px; height: 12px" src="./resource/up.png" alt="" />
            </span>
            <span v-else-if="record.trend === 2">
              <img style="width: 10px; height: 12px" src="./resource/down.png" alt="" />
            </span>
            {{ record.index }}
          </div>

          <div v-if="column.key === 'medal'">
            <img style="width: 20px; height: 20px" src="./resource/star.png" alt="" />
          </div>

          <div v-if="column.key === 'dan'">
            <img style="width: 20px; height: 20px" src="./resource/star.png" alt="" />
          </div>
        </template>
      </a-table>
    </div>
  </div>
</template>
<script lang="ts" setup>
  import { ref } from 'vue'
  import { useListPage } from '/@/hooks/system/useListPage';
  import {list} from './CrowdTestRank.api';
  import {BasicColumn} from '/@/components/Table';

  //let  dataSource = []
   const dataSource = ref([]);
    list({}).then((res) => {
      dataSource.value = res
      // const dataSource = res
      console.log('create checkRoleList:' + JSON.stringify(dataSource))
    });
    const columns: BasicColumn[] = [
    {
      title: '升降',
      dataIndex: 'index',
      key: 'index',
      align: 'center',
    },
    {
      title: '姓名',
      dataIndex: 'username',
      key: 'username',
      align: 'center',
    },
    {
      title: '徽章',
      dataIndex: 'medal',
      key: 'medal',
      align: 'center',
    },
    {
      title: '项目参与度',
      dataIndex: 'projectParticipation',
      key: 'projectParticipation',
      align: 'center',
    },
    {
      title: '问题贡献度',
      dataIndex: 'defectContribution',
      key: 'defectContribution',
      align: 'center',
    },
    {
      title: '知语提交',
      dataIndex: 'zhiyuCommit',
      key: 'zhiyuCommit',
      align: 'center',
    },
    {
      title: '知语运营',
      dataIndex: 'zhiyuOperate',
      key: 'zhiyuOperate',
      align: 'center',
    },
    {
      title: '积分',
      dataIndex: 'integral',
      key: 'integral',
      align: 'center',
    },
    {
      title: '段位',
      dataIndex: 'grade',
      key: 'grade',
      align: 'center',
    },
  ];
  

  
  // const current = ref(1);
  // const pagination = ref({
  //   position: ['bottomCenter'],
  //   total: 10000,
  //   pageSize: 50,
  //   current,
  //   showSizeChanger: false,
  //   onChange(page) {
  //     // 更改页面页数时调用
  //     current.value = page;
  //   },
  // });

</script>

<style lang="less" scoped>
  @primary: #0009C5;
  @min-width: 800px;
  @top-height: 800px;
  @keyframes lefttoright {
    0% {
      transform: translateX(0);
    }
    100% {
      transform: translateX(80%);
    }
  }
  @keyframes lefttoroate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(9deg);
    }
  }
  @keyframes righttoroate {
    0% {
      transform: rotate(0);
    }
    100% {
      transform: rotate(9deg);
    }
  }
  .ranking-container {
    width: 100%;
    height: 100%;
    overflow: hidden auto;
    background-color: @primary;
    min-width: @min-width;
    .ranking-top-pic {
      position: relative;
      .ranking-top-pic--top {
        width: 100%;
      }
      .ranking-top-pic--bottom {
        position: absolute;
        bottom: 0;
        left: 0;
      }
      .ranking-top-pic_center {
        position: absolute;
        bottom: -10%;
        z-index: 2;
        .ranking-top-pic_center--img {
          width: 100%;
        }
      }
      .ranking-top-pic_star {
        width: 40%;
        z-index: 3;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 0;
      }
      .ranking-top-pic_font {
        width: 40%;
        z-index: 4;
        transform: translateX(-50%);
        position: absolute;
        left: 50%;
        top: 58%;
      }
      .ranking-top-pic_left {
        transform-origin: 0% 0%;
        animation: lefttoroate 3s alternate-reverse infinite ease-in-out;
        animation-delay: 2s;
        position: absolute;
        width: 60%;
        left: 0;
        top: 0;
      }
      .ranking-top-pic_right {
        transform-origin: 100% 0%;
        animation: righttoroate 4s alternate-reverse infinite ease-in-out;
        animation-delay: 1s;
        position: absolute;
        width: 60%;
        right: 0;
        top: 0;
      }
      .ranking-top-pic_light {
        animation: lefttoright 6s alternate-reverse infinite ease-in-out;
        position: absolute;
        z-index: 4;
        width: 40%;
        left: 25%;
        top: 57%;
        animation-delay: 2s;
      }
      .ranking-top-pic_title {
        position: absolute;
        z-index: 5;
        width: 40%;
        transform: translateX(-50%);
        left: 50%;
        top: 76%;
        animation-delay: 2s;
        .text {
          position: relative;
          z-index: 2;
          font-size: 2rem;
          color: #542E21;
          text-align: center;
        }
        img {
          position: absolute;
          left: 0;
          top: 0;
          width: 100%;
        }
      }
    }
    .ranking-table {
      padding: 0 20px;
      position: relative;
      top: -30px;
      z-index: 10;
      :deep(.ant-pagination) {
        a {
          color: #fff;
          .ant-pagination-item-ellipsis {
            color: #fff;
          }
        }
        .ant-pagination-item-link {
          border: none;
          background: transparent;
          color: #fff;
        }
      }
      :deep(.ranking-cell-egg) {
        background: transparent;
        color: #fff;
      }
      :deep(.ranking-cell-ogg) {
        background: rgba(128, 128, 239, 0.3);
        color: #fff;
      }
    }
    .custom-table {
      :deep(.ant-table) {
        background: transparent !important; /* 你想要的背景色 */
        color: #fff;
        .ant-table-thead {
          .ant-table-cell {
            background: #188AF6;
            color: #fff;
            border-bottom: none;
            &::before {
              display: none;
            }
          }
        }
        .ant-table-tbody {
          .ant-table-cell {
            background: transparent;
            color: #fff;
            border-bottom: none;
            border: none;
          }
        }
        .ant-empty-normal {
          color: #fff;
        }
        .ant-table-placeholder:hover {
          & > td {
            background: transparent;
            color: #fff;
          }
        }
      }
    }
  }
</style>